<template>
  <div class="platform-content">
    <h4 class="platform-content-title">
      <span>互联网配置</span>
      <div class="platform-list-op">
        <el-button
          v-permission="'hlw.config.create'"
          size="small"
          type="primary"
          @click="openCreate"
        >
          新建
        </el-button>
      </div>
    </h4>
    <div class="platform-content-info">
      <div class="platform-content-list">
        <div class="platform-content-list-table">
          <el-table
            v-loading="listLoading"
            :data="listData"
            stripe
            @sort-change="doPageSort"
          >
            <el-table-column
              prop="appname"
              label="互联网名称"
              sortable
            />
            <el-table-column
              prop="ghid"
              label="原始ID"
              sortable
            />
            <el-table-column
              prop="appid"
              label="Appid"
              sortable
            />
            <el-table-column
              prop="appsecret"
              label="Appsecret"
              sortable
            />
            <el-table-column
              prop="sys_unit_id"
              label="单位id"
              sortable
            />
            <el-table-column
              prop="encodingAESKey"
              label="EncodingAESKey"
              sortable
            />
            <el-table-column
              prop="token"
              label="Token"
              sortable
            />
            <el-table-column
              prop="access_token"
              label="access_token"
              sortable
            />
            <el-table-column
              prop="access_token_expires"
              label="access_token_expires"
              sortable
            />
            <el-table-column
              prop="access_token_lastat"
              label="access_token_lastat"
              sortable
            />
            <el-table-column
              prop="mchid"
              label="微信支付商户号"
              sortable
            />
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              label="操作"
              width="180"
            >
              <template slot-scope="scope">
                <el-button
                  v-permission="'hlw.config.update'"
                  type="text"
                  size="small"
                  @click.native.prevent="openUpdate(scope.row)"
                >
                  修改
                </el-button>
                <el-button
                  v-permission="'hlw.config.delete'"
                  type="text"
                  size="small"
                  class="button-delete-color"
                  @click.native.prevent="openDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="platform-content-list-pagination">
          <el-pagination
            :current-page="pageData.pageNo"
            :page-size="pageData.pageSize"
            :total="pageData.totalCount"
            class="platform-pagenation"
            background
            :page-sizes="[10, 20, 30, 50]"
            layout="sizes, prev, pager, next"
            @current-change="doChangePage"
            @size-change="doSizeChange"
          />
        </div>
      </div>
    </div>

    <el-dialog
      title="新建"
      :visible.sync="createDialogVisible"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        ref="createForm"
        :model="formData"
        :rules="formRules"
        size="small"
        label-width="120px"
      >
                <el-form-item
                prop="appname"
                label="互联网名称"
        >
          <el-input
                  v-model="formData.appname"
                  maxlength="100"
                  placeholder="互联网名称"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="ghid"
                label="原始ID"
        >
          <el-input
                  v-model="formData.ghid"
                  maxlength="100"
                  placeholder="原始ID"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="appid"
                label="Appid"
        >
          <el-input
                  v-model="formData.appid"
                  maxlength="100"
                  placeholder="Appid"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="appsecret"
                label="Appsecret"
        >
          <el-input
                  v-model="formData.appsecret"
                  maxlength="100"
                  placeholder="Appsecret"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="sys_unit_id"
                label="单位id"
        >
          <el-input
                  v-model="formData.sys_unit_id"
                  maxlength="100"
                  placeholder="单位id"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="encodingAESKey"
                label="EncodingAESKey"
        >
          <el-input
                  v-model="formData.encodingAESKey"
                  maxlength="100"
                  placeholder="EncodingAESKey"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="token"
                label="Token"
        >
          <el-input
                  v-model="formData.token"
                  maxlength="100"
                  placeholder="Token"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="access_token"
                label="access_token"
        >
          <el-input
                  v-model="formData.access_token"
                  maxlength="100"
                  placeholder="access_token"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="access_token_expires"
                label="access_token_expires"
        >
          <el-input
                  v-model="formData.access_token_expires"
                  maxlength="100"
                  placeholder="access_token_expires"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="access_token_lastat"
                label="access_token_lastat"
        >
          <el-input
                  v-model="formData.access_token_lastat"
                  maxlength="100"
                  placeholder="access_token_lastat"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
                <el-form-item
                prop="mchid"
                label="微信支付商户号"
        >
          <el-input
                  v-model="formData.mchid"
                  maxlength="100"
                  placeholder="微信支付商户号"
                  auto-complete="off"
                  type="text"
          />
        </el-form-item>
              </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="createDialogVisible = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="btnLoading"
          @click="doCreate"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改分类"
      :visible.sync="updateDialogVisible"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        ref="updateForm"
        :model="formData"
        :rules="formRules"
        size="small"
        label-width="120px"
      >
          <el-form-item
              prop="appname"
              label="互联网名称"
      >
        <el-input
                v-model="formData.appname"
                maxlength="100"
                placeholder="互联网名称"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="ghid"
              label="原始ID"
      >
        <el-input
                v-model="formData.ghid"
                maxlength="100"
                placeholder="原始ID"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="appid"
              label="Appid"
      >
        <el-input
                v-model="formData.appid"
                maxlength="100"
                placeholder="Appid"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="appsecret"
              label="Appsecret"
      >
        <el-input
                v-model="formData.appsecret"
                maxlength="100"
                placeholder="Appsecret"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="sys_unit_id"
              label="单位id"
      >
        <el-input
                v-model="formData.sys_unit_id"
                maxlength="100"
                placeholder="单位id"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="encodingAESKey"
              label="EncodingAESKey"
      >
        <el-input
                v-model="formData.encodingAESKey"
                maxlength="100"
                placeholder="EncodingAESKey"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="token"
              label="Token"
      >
        <el-input
                v-model="formData.token"
                maxlength="100"
                placeholder="Token"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="access_token"
              label="access_token"
      >
        <el-input
                v-model="formData.access_token"
                maxlength="100"
                placeholder="access_token"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="access_token_expires"
              label="access_token_expires"
      >
        <el-input
                v-model="formData.access_token_expires"
                maxlength="100"
                placeholder="access_token_expires"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="access_token_lastat"
              label="access_token_lastat"
      >
        <el-input
                v-model="formData.access_token_lastat"
                maxlength="100"
                placeholder="access_token_lastat"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          <el-form-item
              prop="mchid"
              label="微信支付商户号"
      >
        <el-input
                v-model="formData.mchid"
                maxlength="100"
                placeholder="微信支付商户号"
                auto-complete="off"
                type="text"
        />
      </el-form-item>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateDialogVisible = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="btnLoading"
          @click="doUpdate"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  API_HLW_CONFIG_LIST,
  API_HLW_CONFIG_CREATE,
  API_HLW_CONFIG_DELETE,
  API_HLW_CONFIG_UPDATE,
  API_HLW_CONFIG_GET
} from '@/constant/api/hlw/config'
export default {
  middleware: ['authenticated', 'check_permissions'],
  data() {
    return {
      loading: true,
      btnLoading: false,
      listLoading: false,
      createDialogVisible: false,
      updateDialogVisible: false,
      listData: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0,
        pageOrderName: 'createdAt',
        pageOrderBy: 'descending'
      },
      formData: {
      },
      editData: {
      }
    }
  },
  computed: {
    // 表单验证,写在computed里切换多语言才会更新
    formRules() {
      const formRules = {
                appname: [
          {
            required: true,
            message: '互联网名称',
            trigger: 'blur'
          }
        ],
                ghid: [
          {
            required: true,
            message: '原始ID',
            trigger: 'blur'
          }
        ],
                appid: [
          {
            required: true,
            message: 'Appid',
            trigger: 'blur'
          }
        ],
                appsecret: [
          {
            required: true,
            message: 'Appsecret',
            trigger: 'blur'
          }
        ],
                sys_unit_id: [
          {
            required: true,
            message: '单位id',
            trigger: 'blur'
          }
        ],
                encodingAESKey: [
          {
            required: true,
            message: 'EncodingAESKey',
            trigger: 'blur'
          }
        ],
                token: [
          {
            required: true,
            message: 'Token',
            trigger: 'blur'
          }
        ],
                access_token: [
          {
            required: true,
            message: 'access_token',
            trigger: 'blur'
          }
        ],
                access_token_expires: [
          {
            required: true,
            message: 'access_token_expires',
            trigger: 'blur'
          }
        ],
                access_token_lastat: [
          {
            required: true,
            message: 'access_token_lastat',
            trigger: 'blur'
          }
        ],
                mchid: [
          {
            required: true,
            message: '微信支付商户号',
            trigger: 'blur'
          }
        ],
            }
      return formRules
    }
  },


  created() {
    if (process.browser) {
      this.listPage()
    }
  },
  methods: {
    // 打开字新增窗口
    openCreate() {
      this.formData = {}
      this.createDialogVisible = true
    },
    // 提交表单
    doCreate() {
      this.$refs['createForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$axios
            .$post(API_HLW_CONFIG_CREATE, this.formData)
            .then((d) => {
              this.btnLoading = false
              if (d.code === 0) {
                this.$message({
                  message: d.msg,
                  type: 'success'
                })
                this.createDialogVisible = false
                this.listPage()
              }
            })
        }
      })
    },
    // 打开修改窗口
    openUpdate(row) {
      this.editData.id = row.id
      this.$axios.$post(API_HLW_CONFIG_GET, this.editData).then((d) => {
        if (d.code === 0) {
          this.formData = d.data
          this.updateDialogVisible = true
        }
      })
    },
    // 提交表单
    doUpdate() {
      this.$refs['updateForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$axios
            .$post(API_HLW_CONFIG_UPDATE, this.formData)
            .then((d) => {
              this.btnLoading = false
              if (d.code === 0) {
                this.$message({
                  message: d.msg,
                  type: 'success'
                })
                this.updateDialogVisible = false
                this.listPage()
              }
            })
        }
      })
    },
    // 执行删除
    openDelete(row) {
      this.editData.id = row.id
      this.$confirm(
        '确定删除该条数据 ？',
        '操作提示',
        {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        }
      ).then(() => {
        this.btnLoading = true
        this.$axios
          .$post(API_HLW_CONFIG_DELETE, this.editData)
          .then((res) => {
            this.btnLoading = false
            if (res.code === 0) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.listPage()
            }
          })
      }).catch(() => {})
    },
    // 页码变动事件
    doChangePage(val) {
      this.pageData.pageNo = val
      this.listPage()
    },
    // 页大小变动事件
    doSizeChange(val) {
      this.pageData.pageSize = val
      this.listPage()
    },
    // 页排序事件
    doPageSort(column) {
      this.pageData.pageOrderName = column.prop
      this.pageData.pageOrderBy = column.order
      this.listPage()
    },
    // 获取分页查询数据
    listPage() {
      this.listLoading = true
      this.$axios.$post(API_HLW_CONFIG_LIST, this.pageData).then((res) => {
        this.listLoading = false
        if (res.code === 0) {
          this.listData = res.data.list
          this.pageData.totalCount = res.data.totalCount
        }
      })
    },
    // 条件查询展示第一页内容
    doSearch() {
      this.pageData.pageNo = 1
      this.listPage()
    }
  }
}
</script>
  